<template>
    <el-form
            label-position="top"
            label-width="80px"
            :model="formLabelAlign"
            ref="ruleForm"
            :rules="rules"
    >
        <el-form-item label="流程名称" prop="name">
            <el-input
                class="name"
                v-model="formLabelAlign.name"
                maxlength="30"
                show-word-limit
            > </el-input>
        </el-form-item>

        <el-form-item label="流程描述" prop="describe">
            <el-input
                    type="textarea"
                    v-model="formLabelAlign.describe"
                    :autosize="{ minRows: 3}"
                    show-word-limit
                    :rows="3"
            ></el-input>
        </el-form-item>

        <el-form-item label="流程版本" prop="ver">
            <el-input
                class="title"
                v-model="formLabelAlign.ver"
                maxlength="30"
                show-word-limit
            > </el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submit">立即发布</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {EditRules} from "@forms/flowChart";
    import { mapGetters } from 'vuex'
    import {flowDetail,flowAdd, flowEdit} from '@/api/flowChart'

    export default {
        name: "flowEdit",
        data() {
            return {
                flow_id: '',
                formLabelAlign: {
                    name: '',
                    describe: '',
                    ver: '',
                },
                rules:EditRules,
            }
        },
        computed:{
            ...mapGetters({
                user:'user/getUser',
            }),
        },
        methods: {
            openMask(flow_id){
                this.flow_id = flow_id
                this.formLabelAlign = {
                    name: '',
                    describe: '',
                    ver: '',
                }

                if(this.flow_id) this.getDetail()
            },
            getDetail() {
                flowDetail(this.flow_id)
                    .then(res => {
                        if (Number(res.code) === 0) {
                            let detail =res.data
                            let data = {
                                name: detail.name,
                                describe:detail.describe,
                                ver:detail.ver,
                            }
                            Object.assign(this.formLabelAlign,data)
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            // 提交文章
            submit(){
                this.$refs.ruleForm.validate(valid => {
                    if (!valid) return false
                    let formLabelAlign = this.formLabelAlign

                    let params = {
                        name: formLabelAlign.name,
                        describe:formLabelAlign.describe,
                        ver:formLabelAlign.ver,
                        author: this.user.user_id,
                    }

                    if(this.flow_id){
                        // 修改文章
                        flowEdit(this.flow_id,params)
                            .then(res=>this.resultHandle(res))
                    }else{
                        // 新增文章
                        flowAdd(params)
                            .then(res=>this.resultHandle(res))
                    }
                })
            },
            resultHandle(res){
                if(Number(res.code)===0){
                    this.$Alert({
                        message:res.msg,
                        type:'success',
                        callback:()=>this.$emit('on-success','')
                    })
                }else{
                    this.$Alert({ message:res.msg, type:'error' })
                }
            },
        },
    }
</script>

<style scoped lang="less">

</style>
